<template>
	<view class="energy-consumption-container">
		<view class="title">
			<view class="left-title">充电统计</view>
			<view class="btn">
				<uv-subsection :list="list" mode="button" :current="current" @change="change" activeColor="#3c9cfe"
					bgColor="#ffffff"></uv-subsection>

			</view>
		</view>
		<view class="content">
			<l-echart ref="chartRef" @finished="init"></l-echart>
		</view>
	</view>
</template>

<script setup>
	// #ifdef H5
	import * as echarts from '@/node_modules/echarts/dist/echarts.esm.js';
	// #endif
	import {
		reqDegree
	} from "@/api/model/chargingStation"
	import {
		onMounted,
		reactive,
		computed,
		ref
	} from "vue";

	const current = ref(0)

	const list = ref(['日', '月', '年', '总'])
	const activeIndex = ref(0)
	const dateIndex = ref(0)
	const dateNow = ref(null)
	const option1 = {
		legend: {},
		tooltip: {
			// 鼠标悬浮提示框显示 X和Y 轴数据
			trigger: "axis",
			backgroundColor: "rgba(32, 33, 36,.7)",
			borderColor: "rgba(32, 33, 36,0.20)",
			borderWidth: 1,
			textStyle: {
				// 文字提示样式
				color: "#fff",
				fontSize: "12",
			},
		},
		grid: {
			left: '15%'
		},
		xAxis: {
			type: "category",
			data: [],
			axisLabel: {
				formatter: function(value) {
					// 限制显示前4个字符，超过部分用省略号表示
					return value.length > 4 ?
						value.substring(0, 4) + "..." :
						value;
				},
			},
		},
		yAxis: {
			name: "kWh",
			type: "value",
		},
		series: [],
	}
	/*  */
	const option = {
		legend: {
			bottom: '5px',
			right: '33%',
			// icon: 'rect',
			// itemWidth: 13,
			// itemHeight: 13, // 图例宽高
			textStyle: {
				color: '#000000',
				fontSize: 14
			}
		},
		xAxis: {
			name: '',
			type: 'category',
			data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
			// 不要刻度线
			axisTick: {
				show: false
			},
			// boundaryGap: false, // 不留白，从原点开始
			nameTextStyle: {
				color: '#8c8c8c', //  字体颜色
				fontSize: 14, //  字体大小
				fontWeight: 'normal'
				// 关键代码
				// padding: [-10, -600, -40, -50] // 标题位置调整 上 右 下 左
			},
			axisLine: {
				// 坐标轴轴线相关设置
				onZero: ' ', // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度
				onZeroAxisIndex: '12', // 当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上
				lineStyle: {
					color: '#8c8c8c', // 坐标轴线线的颜色
					width: '1' // 坐标轴线线宽
				}
			}
		},
		yAxis: {
			name: 'MWh',
			type: 'value',
			data: ['100', '200', '300', '400', '500', '600'],
			// 不要刻度
			axisTick: {
				show: false
			},
			nameTextStyle: {
				color: '#8c8c8c', //  字体颜色
				fontSize: 12, //  字体大小
				fontWeight: 'normal'
			},
			splitLine: {
				lineStyle: {
					type: 'solid', // y轴分割线类型
					color: '#E6E6E6',
					width: 2
				}
			},
			axisLine: {
				// 坐标轴轴线相关设置
				onZero: ' ', // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度
				onZeroAxisIndex: '12', // 当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上
				lineStyle: {
					color: '#8c8c8c', // 坐标轴线线的颜色
					width: '1' // 坐标轴线线宽
				}
			}
		},
		grid: {
			left: '18%'
		},
		series: [{
			name: '计划',
			data: [23, 89, 12, 41, 67, 58, 39, 77, 4, 81, 56, 33],
			type: 'line',
			smooth: true,
			// symbol: 'none', // 设置小圆点为 'none'，禁用小圆点
			lineStyle: {
				color: '#F38A64' // 设置线的颜色为黄色
			},
			color: ['#F38A64']
			// 显示每个点的数据
			// itemStyle: { normal: { label: { show: true }}}
		}],
		tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
			trigger: 'axis',
			backgroundColor: 'rgba(32, 33, 36,.7)',
			borderColor: 'rgba(32, 33, 36,0.20)',
			borderWidth: 1,
			textStyle: { // 文字提示样式
				color: '#fff',
				fontSize: '12'
			}
		}
	};
	const change = (index) => {
		current.value = index

		current.value = index
		// 创建映射关系
		const map = new Map();
		map.set(0, 3);
		map.set(1, 2);
		map.set(2, 1);
		map.set(3, 0);

		console.log("对应==", map.get(index))

		getOption(map.get(index))
	}

	/**
	 * 点击菜单回调处理
	 * @param {Object} item 选中项 { label,value } = e
	 */
	const clickItem = (e) => {
		// 下面有重新赋值，所以用let
		let {
			label,
			value
		} = e;
		const findIndex = this.result.findIndex(item => item.name == this.activeName);
		if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
			label = this[this.activeName].label;
		}
		// 已经存在筛选项
		if (findIndex > -1) {
			this.$set(this.result, findIndex, {
				name: this.activeName,
				label,
				value
			})
		} else {
			this.result.push({
				name: this.activeName,
				label,
				value
			});
		}
		this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
		uni.showModal({
			content: `筛选的值：${JSON.stringify(this.result)}`
		})
	}

	// const chartRef = ref < LEchartComponentPublicInstance | null > (null);
	const chartRef = ref(null);
	const init = async () => {
		if (chartRef.value == null) return
		// #ifdef APP
		const chart = await chartRef.value.init(null);
		// #endif
		// #ifdef H5
		const chart = await chartRef.value.init(echarts, null);
		// #endif
		chart.setOption(option1);
	}

	const getOption = (type) => {
		reqDegree(type)
			.then(({
				data
			}) => {
				// console.log(data, "订单统计");
				var xAxis = [];
				var series = [];
				data.data.forEach((item) => {
					xAxis.push(item.stationName);
					series.push(item.degree);
				});
				option1.xAxis.data = xAxis;
				option1.series = [{
					data: series,
					type: "bar",
					itemStyle: {
						color: {
							type: "linear",
							x: 0,
							y: 1,
							x2: 0,
							y2: 0,
							colorStops: [{
									offset: 0,
									color: "#9FEFF4",
								},
								{
									offset: 1,
									color: "#38A6FF",
								},
							],
						},
					},
					barWidth: 12,
				}, ];
				init()
			});

	}
	onMounted(() => {
		getOption(3)
	})
</script>

<style lang="scss" scoped>
	.energy-consumption-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-title {
				height: 76rpx;
				margin-left: 46rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 76rpx;
			}

			.btn {
				display: flex;
				justify-content: space-between;
				margin-right: 30rpx;
				width: 260rpx;

				.line {
					width: 8rpx;
					background: #909090;
					border-radius: 8rpx;
				}


				::v-deep {
					.uv-subsection__item {
						flex: initial !important;
						/* 使用 !important 强制覆盖组件库的默认样式 */
						width: 70rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: center;
					}

					.uv-subsection__item--0 {
						.uv-subsection__item__text {
							width: 50rpx;
							border-right: 1px solid #cccccc;
						}
					}
				}
			}
		}

		.content {
			.echart {
				width: 100%;
				height: 300px;
			}
		}
	}
</style>